<template>
	<div class="outsystem">
		<el-row :gutter="20">
			<el-col :span="8">
				<div class="grid-content bg-purple">
					<span class="fl">监测开关</span>
					<el-switch
						v-model="jc_kgflag"
						active-color="#28a4f4"
						inactive-color="#dcdfe6"
						class="fr"
						style="margin-top:20px;">
					</el-switch>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple">
					<span class="fl">自动干预</span>
					<el-switch
						v-model="jc_gyflag"
						active-color="#28a4f4"
						inactive-color="#dcdfe6"
						class="fr"
						style="margin-top:20px;">
					</el-switch>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple">
					<span class="fl">加紧任务</span>
					<el-switch
						v-model="jc_jjflag"
						active-color="#28a4f4"
						inactive-color="#dcdfe6"
						class="fr"
						style="margin-top:20px;">
					</el-switch>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple">
					<span class="fl">监测模式</span>
					<el-radio-group v-model="jc_ms" class="fl" style="margin:24px 0 0 80px;">
					    <el-radio :label="1">默认模式</el-radio>
					    <el-radio :label="2">双签模式</el-radio>
					    <el-radio :label="3">复合模式</el-radio>
					  </el-radio-group>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple">
					<span class="fl">超时设置</span>
				</div>
				<div class="grid-content bg-purple border_top clear">
					<div class="i_li fl">
						<div class="i_lil fl">
							药师
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="phr_out_time">
							<span>秒</span>
						</div>
					</div>
					<div class="i_li fl">
						<div class="i_lil fl">
							医生
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="doc_out_time">
							<span>秒</span>
						</div>
					</div>
					<div class="i_li fl">
						<div class="i_lil fl">
							科室
						</div>
						<div class="i_lir fl">
							<el-button class="i_btn" @click="selectPop('科室超时设置')">点击设置</el-button>
						</div>
					</div>
				</div> 
			</el-col>
		</el-row>
		
		<el-row style="margin-bottom:100px;">
			<el-col :span="24">
				<div class="grid-content bg-purple">
					<span class="fl">重点关注</span>
				</div>
				<div class="grid-content bg-purple border_top clear">
					<div class="i_lib fl">
						<div class="i_lil fl">
							科室
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="zd_dept_names" placeholder="请选择科室" readonly="readonly">
							<input type="hidden" class="i_liput" v-model="zd_dept_codes">
							<i @click="selectPop('科室')">选择</i>
							<i class="default" @click="clearPop('科室')">清除</i>
						</div>
					</div>
					<div class="i_lib fl">
						<div class="i_lil fl">
							医生
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="zd_doc_names" placeholder="请选择药品" readonly="readonly">
							<input type="hidden" class="i_liput" v-model="zd_doc_codes">
							<i @click="selectPop('医生')">选择</i>
							<i class="default" @click="clearPop('医生')">清除</i>
						</div>
					</div>
					<div class="i_lib fl">
						<div class="i_lil fl">
							药品
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="zd_drug_names" placeholder="请选择药品" readonly="readonly">
							<input type="hidden" class="i_liput" v-model="zd_drug_codes">
							<i class="c_searchbtn"  @click="selectPop('药品')">选择</i>
							<i class="default" @click="clearPop('药品')">清除</i>
						</div>
					</div>
					<div class="i_lib fl">
						<div class="i_lil fl">
							疾病
						</div>
						<div class="i_lir fl">
							<input type="text" class="i_liput" v-model="zd_dease_names" placeholder="请选择疾病" readonly="readonly">
							<input type="hidden" class="i_liput" v-model="zd_dease_codes">
							<i class="c_searchbtn"  @click="selectPop('疾病')">选择</i>
							<i class="default" @click="clearPop('疾病')">清除</i>
						</div>
					</div>
				</div> 
			</el-col>
		</el-row>
		<div class="out_btnbox">
			<el-button type="danger" @click="resetFun">恢复默认</el-button>
			<el-button type="primary" @click="savaFun">更新保存</el-button>
		</div>
		<Poptable :pType="pType" :setting="true" ctype="mz" ref="ptable" @dept="deptChange" @drug="drugChange" @doc="docChange" @disease="diseaseChange"></Poptable>
	</div>
</template>

<script>
	import Poptable from "../components/poptable"
	export default {
		components:{Poptable},
		data () {
			return {
				pType:"",
				jc_kgflag:false,
				jc_gyflag:false,
				jc_jjflag:false,
				jc_ms:1,
				phr_out_time:"",
				doc_out_time:"",
				zd_dept_codes:"",
				zd_dept_names:"",
				zd_drug_codes:"",
				zd_drug_names:"", 
				zd_doc_codes:"",
				zd_doc_names:"",
				zd_dease_codes:"",
				zd_dease_names:"",
			}
		},
		mounted() {
			this.getDetail();
		},
		methods:{
			async getDetail(){
				let res=await this.$ptc.setMzSys();
				this.jc_kgflag=res.jc_kg==1?true:false;
				this.jc_gyflag=res.jc_gy==1?true:false;
				this.jc_jjflag=res.jc_jj==1?true:false;
				this.jc_ms=res.jc_ms;
				this.phr_out_time=res.phr_out_time;
				this.doc_out_time=res.doc_out_time;
				this.zd_dept_codes=res.zd_dept_codes;
				this.zd_dept_names=res.zd_dept_names;
				this.zd_drug_codes=res.zd_drug_codes;
				this.zd_drug_names=res.zd_drug_names;
				this.zd_doc_codes=res.zd_doc_codes;
				this.zd_doc_names=res.zd_doc_names;
				this.zd_dease_codes=res.zd_dease_codes;
				this.zd_dease_names=res.zd_dease_names;
			},
			deptChange(data){
				var names=[],codes=[];
				for(var i=0;i<data.length;i++){
					names.push(data[i].ksmc)
					codes.push(data[i].ksdm)
				}
				this.zd_dept_names=names.join(",");
				this.zd_dept_codes=codes.join(",");
			},
			drugChange(data){
				var names=[],codes=[];
				for(var i=0;i<data.length;i++){
					names.push(data[i].ypmc)
					codes.push(data[i].ypdm)
				}
				this.zd_drug_names=names.join(",");
				this.zd_drug_codes=codes.join(",");
			},
			docChange(data){
				var names=[],codes=[];
				for(var i=0;i<data.length;i++){
					names.push(data[i].ysmc)
					codes.push(data[i].ysdm)
				}
				this.zd_doc_names=names.join(",");
				this.zd_doc_codes=codes.join(",");
			},
			diseaseChange(data){
				var names=[],codes=[];
				for(var i=0;i<data.length;i++){
					names.push(data[i].zdmc)
					codes.push(data[i].zddm)
				}
				this.zd_dease_names=names.join(",");
				this.zd_dease_codes=codes.join(",");
			},
			selectPop (val) {
				this.$refs.ptable.show();
				this.pType = val;
			},
			clearPop(val){
				if(val == "科室"){
					this.zd_dept_codes="";
					this.zd_dept_names="";
				}else if(val == "医生"){
					this.zd_doc_codes="";
					this.zd_doc_names="";
				}else if(val == "药品"){
					this.zd_drug_codes="";
					this.zd_drug_names="";
				}else if(val == "疾病"){
					this.zd_dease_codes="";
					this.zd_dease_names="";
				}
			},
			async savaFun(){
				let res=await this.$ptc.mzSetSave({
					jc_kg:this.jc_kgflag?1:0,
					jc_gy:this.jc_gyflag?1:0,
					jc_jj:this.jc_jjflag?1:0,
					jc_ms:this.jc_ms,
					phr_out_time:this.phr_out_time,
					doc_out_time:this.doc_out_time,
					zd_dept_codes:this.zd_dept_codes,
					zd_dept_names:this.zd_dept_names,
					zd_drug_codes:this.zd_drug_codes,
					zd_drug_names:this.zd_drug_names,
					zd_doc_codes:this.zd_doc_codes,
					zd_doc_names:this.zd_doc_names,
					zd_dease_codes:this.zd_dease_codes,
					zd_dease_names:this.zd_dease_names,
					type:"mz"
				})
				console.log(res);
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				if(res.code == 1){
					this.getDetail()
				}
			},
			async resetFun(){
				let res=await this.$ptc.setSaveDefaut({type:"mz"});
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				if(res.code == 1){
					this.getDetail()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background:#fff;
	}
	.outsystem{
		width:100%;
		height:100%;
		background:#e3ecf5;
		padding:22px;
		.el-row{
			margin-bottom:20px;
		}
		.grid-content{
			background:#fff;
			height:60px;
			border-radius: 4px;
			padding:0 20px;
			line-height:60px;
			font-size:16px;
			color:#333;
			&.border_top{
				border-top:1px solid #e7e7e7;height:auto;padding:22px 20px;
			}
			.i_li{
				margin-right:115px;line-height:40px;
				.i_lil{
					padding-right:13px;font-size:14px;color:#666;
				}
				.i_lir{
					&>span{
						padding-left:15px;font-size:14px;color:#666;
					}
				}
				.i_liput{
					width:150px;height:40px;border:1px solid #dcdfe6;border-radius:3px;padding:0 15px;
				}
				.i_btn{
					width:98px;text-align: center;height:40px;border:1px solid #dcdfe6;border-radius:3px;font-size:12px;volor:#999;background:#f4f4f5;cursor:pointer;
				}
			}
			.i_lib{
				width:100%;
				.i_lil{
					padding-right:13px;font-size:14px;color:#666;
				}
				.i_lir{
					width:calc(100% - 42px);
					i{
						display: inline-block;width: 34px;height: 25px;margin-left: 3px;background: #28a4f4;color: #fff;font-size: 12px;text-align: center;line-height: 26px;border-radius: 6px;cursor: pointer;position:relative;top:-2px;border:1px solid #28a4f4;box-sizing:content-box;
					}
					i.default{
						display: inline-block;width: 34px;height: 25px;margin-left: 3px;background: #fff;color: #666;font-size: 12px;text-align: center;line-height: 26px;border-radius: 6px;cursor: pointer;position:relative;top:-2px;border:1px solid #cfcfcf;box-sizing:content-box;
					}
				}
				.i_liput{
					width:calc(100% - 100px);height:40px;border:1px solid #dcdfe6;border-radius:3px;padding:0 15px;
				}
			}
		}
		.out_btnbox{
			width:100%;
			height:80px;
			text-align:center;
			background:#fff;
			position:absolute;
			left:0;
			bottom:0;
			line-height:80px;
		}
	}
</style>
